<template>
  <a-layout class="layout-container">
    <!-- 侧边栏 -->
    <a-layout-sider collapsible v-model:collapsed="collapsed" :width="200" :collapsed-width="50" theme="light">
      <a-menu mode="inline" :selectedKeys="[selectedKey]" class="sider-menu" @select="handleMenuSelect">
        <a-menu-item key="1">
          <template #icon><home-outlined /></template>
          首页
        </a-menu-item>
        <a-menu-item key="2">
          <template #icon><desktop-outlined /></template>
          页面1
        </a-menu-item>
        <a-menu-item key="3">
          <template #icon><file-outlined /></template>
          页面2
        </a-menu-item>
        <a-menu-item key="4">
          <template #icon><profile-outlined /></template>
          页面3
        </a-menu-item>
        <a-menu-item key="5">
          <template #icon><team-outlined /></template>
          页面4
        </a-menu-item>
        <a-menu-item key="6">
          <template #icon><folder-outlined /></template>
          页面5
        </a-menu-item>
        <a-menu-item key="7">
          <template #icon><calendar-outlined /></template>
          页面6
        </a-menu-item>
        <a-menu-item key="8">
          <template #icon><setting-outlined /></template>
          页面7
        </a-menu-item>
        <a-menu-item key="9">
          <template #icon><appstore-outlined /></template>
          页面8
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <a-layout class="main-layout">
      <a-layout-header class="header">
        <div class="header-inner">
          Header区域
        </div>
      </a-layout-header>

      <!-- 主区域 -->
      <a-layout-content class="content-container">
        <div class="content-inner">
          <Page1 v-if="selectedKey === '2'" />
          <div v-else>首页内容</div>
        </div>
      </a-layout-content>

      <div class="footer">
        <div class="footer-inner">
          footer区域
        </div>
      </div>
    </a-layout>
  </a-layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  HomeOutlined,
  DesktopOutlined,
  FileOutlined,
  ProfileOutlined,
  TeamOutlined,
  FolderOutlined,
  CalendarOutlined,
  SettingOutlined,
  AppstoreOutlined
} from '@ant-design/icons-vue'
import Page1 from '@/views/Page1.vue'

const collapsed = ref(false)
const selectedKey = ref('1')

const handleMenuSelect = ({ key }: { key: string }) => {
  selectedKey.value = key
}
</script>

<style scoped>
.layout-container {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.main-layout {
  background: #f5f5f5;
}

.sider-menu {
  height: 100%;
  border-right: 1px solid #f0f0f0;
}

.header {
  padding: 0 16px;
  height: 60px;
  line-height: initial;
  background: #f5f5f5;
}

.header-inner {
  padding: 0 24px;
  height: 100%;
  background: #fff;
  display: flex;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-container {
  padding: 16px;
  overflow: hidden;
  height: calc(100vh - 120px);
  /* 减去header(60px)、footer(60px)的高度 */
}

.content-inner {
  padding: 24px;
  background: #fff;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer {
  padding: 0 16px;
  height: 60px;
  background: #f5f5f5;
}

.footer-inner {
  height: 100%;
  background: #fff;
  text-align: center;
  line-height: 60px;
}
</style>
